<template>
	<view class="exam-container">
		<!-- 试卷标题区域 -->
		<view class="exam-header">
			<view class="exam-title">{{list.name}}</view>
			<view class="exam-info">
				<text class="info-item">试卷总分：{{list.score}}</text>
				<text class="info-item">考试时间：{{list.suggestTime}}分钟</text>
			</view>
		</view>
		<view class="question-item" v-for="item in options"
			v-if="options.some(item => item.questionItems.some(ite => ite.questionType === 5 && 4))">
			<view class="question-title">{{item.name}}</view>
			<view class="question-content" v-for="ite in item.questionItems">
				<text class="question-text">{{ite.title}}</text>
				<textarea class="answer-textarea" v-model="answers[ite.id]"
					@input="(e) => answers[ite.id] = e.detail.value"></textarea>
			</view>
		</view>
		<!-- 题目列表 -->
		<view class="question-list">
			<!-- 题目 -->
			<view class="question-item" v-for="item in options"
				v-if="options.some(item => item.questionItems.some(ite => ite.questionType === 1 && 3))">
				<view class="question-title">{{item.name}}</view>
				<view class="question-content" v-for="ite in item.questionItems">
					<text class="question-text">{{ite.title}}</text>
					<radio-group class="options-group" @change="(e) => selectedAnswers[ite.id] = e.detail.value">
						<label class="option-item" v-for="it in ite.items" :key="it.prefix">
							<radio :value="it.prefix" />
							<text>{{ it.prefix + "." + it.content }}</text>
						</label>
					</radio-group>
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-btn-container">
			<button class="submit-btn" type="primary" @click="fn">提交试卷</button>
		</view>
	</view>
</template>

<script>
	import http from "../../http.js"
	import {
		methods
	} from "../../uni_modules/uview-ui/libs/mixin/mixin.js";
	export default {
		data() {
			return {
				list: [],
				options: [],
				id: "",
				answers: {}, // 存储所有题目答案 { 题目ID: 答案 }
				selectedAnswers: {}, // 存储选择题答案
				startTime: 0
			}
		},
		methods: {
			getlist() {
				http({
					url: "/api/student/exam/paper/select/" + this.id,
					method: "post"
				}).then(res => {
					console.log(res);
					this.list = res.response
					this.options = res.response.titleItems
					console.log(this.list);
					console.log(this.options);
				})
			},
			fn() {
				// 构造提交参数
				const submitData = {
					questionId: null, // 根据实际情况填写
					doTime: this.calculateExamTime(), // 需要实现考试计时逻辑
					answerItems: this.options.flatMap((section, sectionIndex) => {
						return section.questionItems.map(question => {
							// 构造题目答案对象
							const answerItem = {
								questionId: question.id, // 题目ID
								content: this.answers[question.id] || '', // 绑定用户的答案
								contentArray: Array.isArray(this.answers[question.id]) ?
									this.answers[question.id] : null, // 填空题数组
								completed: !!this.answers[question.id], // 是否完成
								itemOrder: question.itemOrder // 题目顺序号
							};

							// 处理选择题答案
							if ([1, 2].includes(question.questionType)) {
								answerItem.content = this.selectedAnswers[question.id];
							}

							return answerItem;
						});
					}),
					id: this.id // 试卷ID
				};

				// 发送请求
				http({
					url: "/api/student/exampaper/answer/answerSubmit",
					method: "post",
					data: submitData
				}).then(res => {
					console.log('提交成功', res);
					if(res.code === 1){
						uni.navigateBack()
					}
				}).catch(err => {
					console.error('提交失败', err);
				});
			},
			calculateExamTime() {
				return Math.floor((Date.now() - this.startTime) / 1000); // 返回秒数
			}
		},
		onLoad(options) {
			this.id = options.paperId
			console.log(this.id);

		},
		onReady() {
			this.getlist()
			this.startTime = Date.now();
		}
	}
</script>

<style>
	/* 新增文本输入框样式 */
	.answer-textarea {
		width: 100%;
		min-height: 200rpx;
		padding: 20rpx;
		margin-top: 20rpx;
		background-color: #f8f8f8;
		border-radius: 12rpx;
		font-size: 28rpx;
		line-height: 1.5;
		color: #333;
	}

	/* 适配小程序textarea组件 */
	/* #ifdef MP-WEIXIN */
	.answer-textarea {
		padding: 15rpx;
		min-height: 240rpx;
	}

	/* #endif */
	/* 页面容器 */
	.exam-container {
		padding: 20rpx;
		background-color: #ffffff;
		min-height: 100vh;
	}

	/* 试卷标题区域 */
	.exam-header {
		padding: 30rpx;
		border-bottom: 1px solid #eeeeee;
	}

	.exam-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		color: #333333;
	}

	.exam-info {
		display: flex;
		flex-direction: column;
	}

	.info-item {
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 10rpx;
	}

	/* 题目列表 */
	.question-list {
		padding: 20rpx;
	}

	.question-item {
		margin-bottom: 40rpx;
	}

	.question-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		color: #333333;
	}

	.question-text {
		font-size: 30rpx;
		margin-bottom: 20rpx;
		display: block;
	}

	.options-group {
		display: flex;
		flex-direction: column;
	}

	.option-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		font-size: 30rpx;
	}

	.option-item radio {
		margin-right: 20rpx;
	}

	/* 提交按钮 */
	.submit-btn-container {
		padding: 30rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.submit-btn {
		width: 100%;
		background-color: #3a8be6;
	}
</style>